<!-- 企业预警看板 -->
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
        <title>企业预警看板</title>
        <link rel="stylesheet" href="css/app.css" />
        <script src="js/echarts.min.js"></script>
        <script src="js/xinjiang.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/request.js"></script>
        <script src="js/time.js"></script>
        <style>
            .btns {
                position: absolute;
                top: .9rem;
                left: 44px;
                z-index: 1000;
            }

            .btns .btn {
                background-color: rgba(12, 69, 154, .5);
                padding: 4px 10px;
                border: none;
                border-radius: 4px;
                color: #3A9DFD;
                cursor: pointer;
            }

            .btns .activeBtn {
                background-color: #0C459A;
                font-weight: bold;
            }

            #time {
                position: absolute;
                top: 1rem;
                right: 44px;
                color: #206bdb;
                font-weight: bold;
            }

            .unit-box {
                position: relative;
            }

            .unit {
                position: absolute;
                top: .5rem;
                right: 1rem;
                color: #fff;
                font-size: .7rem;
            }
        </style>
        <!-- 预警督办 -->
        <style>
            #tu4 {
                width: 90%;
                margin-left: 5%;
                height: 82%;
                margin-top: 2%;
                color: #fff;
                font-size: 14px;
            }

            #up {
                height: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .up-item {
                width: 7rem;
                height: 7rem;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .up-item img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            #down {
                margin-top: 1rem;
                display: flex;
                display: flex;
                justify-content: space-between;
            }

            .down-item-box {
                width: 47%;
            }

            .down-item {
                width: 100%;
                height: 60px;
                margin-top: .5rem;
                background-color: #062254;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
        </style>
        <!-- 预警情况统计 -->
        <style>
            #rightup {
                margin-top: 2rem;
                display: flex;
                justify-content: space-around;
            }

            .rightupitem {
                display: flex;
                align-items: center;
            }

            .round {
                width: 3rem;
                height: 3rem;
                margin-right: .6rem;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #06245E;
            }

            .round img {
                width: 1.4rem;
                height: 1.4rem;
            }
        </style>
    </head>

    <body class="biao2">
        <div class="header">
            <div class="btns">
                <button class="btn" onclick="location.href='./enterprise1.html'">综合看板</button>
                <button class="btn activeBtn">预警看板</button>
            </div>
            <div id="time"></div>
            <h1 class="header-title" style="color: #FFFFFF;">兵团农民工工资支付监控预警平台</h1>
        </div>
        <div class="wrapper">
            <div class="content" style="padding:50px 15px 25px">
                <div class="col col-l">
                    <div class="xpanel-wrapper xpanel-wrapper-60">
                        <div class="xpanel xpanel-l-t Bj">
                            <div class="title">辖区预警分布</div>
                            <div class="xslb" id="tu1" style="width:100%;height:92%;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-40">
                        <div class="xpanel xpanel-r-t Bj unit-box">
                            <div class="title">累计预警统计</div>
                            <span class="unit">单位：个</span>
                            <div class="xslb" id="tu2" style="width:100%;height:90%;"></div>
                        </div>
                    </div>
                </div>

                <div class="col col-c">
                    <div class="xpanel-wrapper xpanel-wrapper-60">
                        <div class="xpanel DiTu1 Bj">
                            <div class="title">预警地图</div>
                            <div class="TuBiao" id="tu3" style="width:100%;height:92%;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-40">
                        <div class="xpanel DiTu1 Bj unit-box">
                            <div class="title">预警督办</div>
                            <span class="unit">单位：个</span>
                            <div id="tu4">
                                <div id="up">
                                    <div class="up-item">
                                        <img src="./img/yujing1.png" alt="">
                                        <span class="up1" style="color:#fff; font-size: 1.1rem;"></span>
                                        <span style="color:#ccc; font-size: .7rem;">在建项目</span>
                                    </div>
                                    <div class="up-item">
                                        <img src="./img/yujing1.png" alt="">
                                        <span class="up2" style="color:#fff; font-size: 1.1rem;"></span>
                                        <span style="color:#ccc; font-size: .7rem;">今日预警</span>
                                    </div>
                                    <div class="up-item">
                                        <img src="./img/yujing1.png" alt="">
                                        <span class="up3" style="color:#fff; font-size: 1.1rem;"></span>
                                        <span style="color:#ccc; font-size: .7rem;">本月预警</span>
                                    </div>
                                    <div class="up-item">
                                        <img src="./img/yujing1.png" alt="">
                                        <span class="up4" style="color:#fff; font-size: 1.1rem;"></span>
                                        <span style="color:#ccc; font-size: .7rem;">今日督办</span>
                                    </div>
                                </div>
                                <div id="down">
                                    <div class="down-item-box">
                                        <span style="color:#067FD8">本月督办</span>
                                        <div class="down-item">
                                            <div>
                                                <div class="down1"></div>
                                                <span style="color:#ccc;font-size:.7rem;">已督办项目数</span>
                                            </div>
                                            <div>
                                                <div class="down2"></div>
                                                <span style="color:#ccc;font-size:.7rem;">未督办项目数</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="down-item-box">
                                        <span style="color:#067FD8">历史督办</span>
                                        <div class="down-item">
                                            <div>
                                                <div class="down3"></div>
                                                <span style="color:#ccc;font-size:.7rem;">已督办项目数</span>
                                            </div>
                                            <div>
                                                <div class="down4"></div>
                                                <span style="color:#ccc;font-size:.7rem;">未督办项目数</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col col-r">
                    <div class="xpanel-wrapper xpanel-wrapper-60">
                        <div class="xpanel xpanel-r-b Bj unit-box">
                            <div class="title">预警情况统计</div>
                            <span class="unit">单位：万元</span>
                            <div id="rightup">
                                <div class="rightupitem">
                                    <div class="round">
                                        <img src="./img/yujing2.png" alt="">
                                    </div>
                                    <div>
                                        <div class="rightup1" style="color:#fff"></div>
                                        <span style="color:#ccc; font-size:.8rem;">本月预警</span>
                                    </div>
                                </div>
                                <div class="rightupitem">
                                    <div class="round">
                                        <img src="./img/yujing3.png" alt="">
                                    </div>
                                    <div>
                                        <div class="rightup2" style="color:#fff"></div>
                                        <span style="color:#ccc; font-size:.8rem;">累计预警数</span>
                                    </div>
                                </div>
                            </div>
                            <div class="tu" id="tu5" style="width:100%;height:76%;"></div>
                        </div>
                    </div>
                    <div class="xpanel-wrapper xpanel-wrapper-40">
                        <div class="xpanel xpanel-r-m Bj">
                            <div class="title">月预警趋势</div>
                            <div class="tu" id="tu6" style="width:100%;height:90%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        var colorArr = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#9f05c5", "#c29927"];
        var colorAlpha = [
            'rgba(60,170,211,0.1)', 'rgba(1,203,179,0.1)', 'rgba(133,230,71,0.1)', 'rgba(93,92,218,0.1)',
            'rgba(159,5,197,0.1)', 'rgba(194,153,39,0.1)'
        ]


        // 获取当前时间
        getTimeFn()
        window.setInterval(() => {
            setTimeout(() => {
                getTimeFn()
            }, 0)
        }, 1000)
        // 获取时间
        function getTimeFn() {
            $('#time').text(getTime().date + '  ' + getTime().time)
        }


        // 获取参数
        const xinjiang = { // 正式上线这里要去掉
            deptId: 28533, // 部门id
        }
        sessionStorage.setItem('xinjiang', JSON.stringify(xinjiang))
        const { deptId } = JSON.parse(sessionStorage.getItem('xinjiang'))
        console.log('参数', deptId)


        // 辖区预警分布
        var mytu1 = echarts.init(document.getElementById('tu1'));
        // 累计预警统计
        var mytu2 = echarts.init(document.getElementById('tu2'));
        // 预警地图
        var mytu3 = echarts.init(document.getElementById('tu3'));
        // 预警督办
        var mytu4 = null
        // 预警情况统计
        var mytu5 = echarts.init(document.getElementById('tu5'));
        // 月预警趋势
        var mytu6 = echarts.init(document.getElementById('tu6'));


        // 辖区预警分布
        fenbu()
        // 累计预警统计
        leiji()
        // 预警地图
        map()
        // 预警督办
        duban()
        // 预警情况统计
        tongji()
        // 月预警趋势
        qushi()


        // 轮询
        // window.setInterval(() => {
        //     setTimeout(() => {
        //         fenbu()
        //         leiji()
        //         map()
        //         duban()
        //         tongji()
        //         qushi()
        //     }, 0)
        // }, 10000)


        // 辖区预警分布
        function fenbu() {
            get('/index/bigScreen/api/yjyg/deptyjfb?deptId=' + deptId, null, function (res) {
                const { data } = res
                console.log('辖区预警分布', data)
                const yData = []
                const titleData = []
                const valueData = []
                data.map((v, i) => {
                    yData.push(v.gcmc)
                    valueData.push(v.yjbfb)
                    titleData.push({
                        value: 0,
                        label: {
                            normal: {
                                show: true,
                                position: [-10, -30],
                                formatter: data.length - i + '、{b}',
                                // formatter: function (value) {
                                //     var ret = ""; //拼接加\n返回的类目项  
                                //     var maxLength = 50; //每项显示文字个数  
                                //     var valLength = value.name.length; //X轴类目项的文字个数  
                                //     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                //     if (rowN > 1) //如果类目项的文字大于3,  
                                //     {
                                //         for (var i = 0; i < rowN; i++) {
                                //             var temp = ""; //每次截取的字符串  
                                //             var start = i * maxLength; //开始截取的位置  
                                //             var end = start + maxLength; //结束截取的位置  
                                //             // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                                //             temp = value.name.substring(start, end) + "\n";
                                //             ret += temp; // 凭借最终的字符串  
                                //         }
                                //         return ret;
                                //     }
                                //     else {
                                //         return value.name;
                                //     }
                                // },
                                offset: [10, 0],
                                textStyle: {
                                    color: '#aaa',
                                    fontSize: 12
                                }
                            }
                        }
                    })
                })
                yData.reverse()
                valueData.reverse()
                const option1 = {
                    grid: {
                        left: '4%',
                        right: '10%',
                        top: '6%',
                        bottom: '2%',
                    },
                    tooltip: { //可以配合下方的tooltip出来单个悬浮信息.
                        trigger: 'item',
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: yData,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: valueData,
                            barWidth: 10,
                            z: 10,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [{
                                            offset: 0,
                                            color: '#3A62CE' /*#0085FA*/
                                        }, {
                                            offset: 0.7,
                                            color: '#5BD7A3' /*#00BBFD*/
                                        }]),
                                    barBorderRadius: 15
                                }
                            },
                            label: {
                                show: true,
                                fontSize: 20,
                                distance: 10,
                                position: [0, "-100%"],
                                offset: [0, -50],
                                normal: {
                                    show: true,
                                    position: 'right',
                                    color: '#fff',
                                    //TODO 
                                    formatter: function (param) {
                                        return param.value + '%'
                                    }
                                },
                            },
                        },
                        {
                            // current data
                            type: 'bar',
                            symbol: 'rect',
                            symbolRepeat: 'fixed',
                            symbolMargin: '70%',
                            symbolClip: true,
                            symbolSize: [10, 70],
                            symbolBoundingData: 1000,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [-10, 70],
                                    textStyle: {
                                        color: 'darkorange',
                                        fontSize: 18
                                    }
                                }
                            },
                            data: titleData,
                            z: 99999999,
                        },
                        // {
                        //     type: 'bar',
                        //     data: [400, 400, 400, 400, 400],
                        //     barWidth: 10,
                        //     tooltip: {
                        //         show: false
                        //     },
                        //     barGap: '-100%',
                        //     label: {
                        //         normal: {
                        //             show: false,
                        //         }
                        //     },
                        //     itemStyle: {
                        //         normal: {
                        //             color: 'rgba(0,0,0, 0.3)',
                        //             barBorderRadius: 10
                        //         }
                        //     }
                        // }
                    ]
                };
                mytu1.setOption(option1)
            })
        }

        // 累计预警统计
        function leiji() {
            get('/index/bigScreen/api/yjyg/deptljyjtj?deptId=' + deptId, null, function (res) {
                console.log('累计预警统计', res.data)
                const data = res.data.ljyjfl
                const xData = []
                const data1 = [] // 累计预警项目
                const data2 = []
                data.map((v, i) => {
                    xData.push(v.name)
                    data1.push(v.yjxms)
                    data2.push(v.yhcs)
                })
                const option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        // data: ['累计预警项目：' + , '累计预警次数：' + res.data.ljyj.ljyjcs],
                        data: [`累计预警项目(个)`, '累计预警次数(次)'],
                        textStyle: {
                            color: '#fff'
                        },
                        top: '5%'
                    },
                    grid: {
                        top: '20%',
                        left: '4%',
                        right: '4%',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                }
                            },
                            axisLabel: {
                                color: '#fff',
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '累计预警项目(个)',
                            type: 'bar',
                            barWidth: 18,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{c}',
                                    position: "top",
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 20,
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#fccb05'
                                    }, {
                                        offset: 1,
                                        color: '#000'
                                    }]),
                                },
                            },
                            data: data1
                        },
                        {
                            name: '累计预警次数(次)',
                            type: 'bar',
                            barWidth: 18,
                            stack: '对比',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{c}',
                                    position: "top",
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#00C7E1'
                                    }, {
                                        offset: 1,
                                        color: '#000'
                                    }]),
                                    opacity: 1,
                                    barBorderRadius: 12,
                                }
                            },
                            data: data2
                        }
                    ]
                }
                mytu2.setOption(option2)
            })
        }

        // 预警地图
        function map() {
            get('/index/bigScreen/api/nation', null, function (list) {
                let points = list.data
                get('/index/bigScreen/api/yjyg/yjygDeptDetails?deptId=' + deptId, null, function (res) {
                    const data = res.data
                    // console.log('地图信息',data)
                    const mapData = []
                    data.map((v, i) => {
                        points.map((a, b) => {
                            if (v.address_id == a.districtId) {
                                v['value'] = a.point.split(',')
                                v['name'] = a.districtName
                            }
                        })
                        mapData.push(v)
                    })
                    console.log('处理后地图信息', mapData)

                    const option3 = {
                        tooltip: {
                            trigger: 'item',
                            formatter: function (res) {
                                const data = res.data
                                return `<b style="color:yellow">${data.name}</b><br/>
                                    本月预警个数:  <span style="margin-right:.5rem">${data.byyj}</span><br/>
                                    今日督办个数:  <span style="margin-right:.5rem">${data.jrdb}</span><br/>
                                    今日预警个数:  <span style="margin-right:.5rem">${data.jryj}</span><br/>
                                    本月督办个数:  <span style="margin-right:.5rem">${data.bydb}</span><br/>
                                    在建项目个数:  <span style="margin-right:.5rem">${data.zjxm}</span><br/>
                                    累计预警个数:  <span style="margin-right:.5rem">${data.ljyj}</span><br/>
                                    累计督办个数:  <span style="margin-right:.5rem">${data.ljdb}</span>
                                `
                            }
                        },
                        geo: {
                            map: '新疆',
                            show: true,
                            roam: true,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: '#002E57',
                                    borderColor: '#0F6FB5',// 线
                                    shadowColor: '#00B5E7',// 外发光
                                    shadowBlur: 8
                                },
                                emphasis: {
                                    areaColor: '#002E57',// 悬浮区背景0a2dae
                                }
                            }
                        },
                        series: [
                            {
                                symbolSize: 10,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'bottom',
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'yellow'
                                    }
                                },
                                name: 'light',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: mapData
                            },
                        ]
                    };
                    // 地图
                    mytu3.setOption(option3)
                })
            })
        }

        // 预警督办
        function duban() {
            get('/index/bigScreen/api/yjyg/deptyjdbtj?deptId=' + deptId, null, function (res) {
                console.log('预警督办', res.data)
                const data = res.data
                $('.up1').text(data.zjxms + '个') // 在建项目
                $('.up2').text(data.jryj + '个') // 今日预警数
                $('.up3').text(data.byyj + '个') // 本月预警
                $('.up4').text(data.jrdb + '个') // 进入督办
                $('.down1').text(data.bydbxms + '个')
                $('.down2').text(data.bywdbxms + '个')
                $('.down3').text(data.lsydbxms + '个')
                $('.down4').text(data.lswdbxms + '个')
            })
        }

        // 预警情况统计
        function tongji() {
            get('/index/bigScreen/api/yjyg/deptyjqktj?deptId=' + deptId, null, function (res) {
                console.log('预警情况统计', res.data)
                const data = res.data
                $('.rightup1').text(data.yjqktj.byyj)
                $('.rightup2').text(data.yjqktj.ljyj)

                const legendData = []
                const seriesData = []
                data.yjqkfl.map((v, i) => {
                    legendData.push(v.namge)
                    seriesData.push({
                        value: v.value,
                        name: v.namge,
                        itemStyle: {
                            normal: {
                                color: {
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: colorArr[i] // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: colorArr[i] // 100% 处的颜色
                                        }
                                    ]
                                },
                            }
                        }
                    })
                })

                const option5 = {
                    grid: {// 统计图距离边缘的距离
                        top: '10%',
                        left: '10%',
                        right: '10%',
                        bottom: '10%'
                    },
                    legend: {
                        x: 'center',
                        bottom: '5%',
                        itemGap: 20,
                        data: legendData,
                        itemWidth: 18,
                        itemHeight: 10,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    series: [
                        {
                            name: '完成率',
                            type: 'pie',
                            radius: [40, 80],
                            data: seriesData,
                            roseType: 'angle',
                            color: ['#000', '#4372da'],
                            center: ['50%', '40%'],
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255,255, 0.6)',
                                    },
                                    formatter: function (param) {
                                        return param.name + ': ' + param.value+'\n';
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: '#ddd'
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0)'
                                }
                            }
                        }
                    ]
                }
                mytu5.setOption(option5)
            })
        }

        // 月预警趋势
        function qushi() {
            get('/index/bigScreen/api/yjyg/deptyyjcstj?deptId=' + deptId + '&num=12', null, function (res) {
                console.log('月预警趋势', res.data)
                const data = res.data
                data.map((v, i) => {
                    v['y'] = Number(v.name.substr(0, v.name.length - 1))
                })
                const arr = data.sort(compare1('y'))
                const xData = []
                const seriesData = []
                arr.map((v, i) => {
                    xData.push(v.name)
                    seriesData.push(v.value)
                })
                const option6 = {
                    title: {
                        textStyle: {
                            color: "#6a9cd5",
                        },
                        left: "center",
                    },

                    tooltip: {//鼠标悬浮弹出提示框
                        trigger: 'axis', //提示框弹出的触发时间，折线图和柱状图为axis
                        formatter: "{a} <br/>{b} : {c} "//提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
                    },
                    grid: {//统计图距离边缘的距离
                        top: '10%',
                        left: '10%',
                        right: '10%',
                        bottom: '20%'
                    },
                    xAxis: [{//x轴
                        type: 'category',//数据类型为不连续数据
                        boundaryGap: false,//坐标轴两边是否留白
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#233e64' //x轴颜色
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置
                            interval: 0, // 不间隔显示
                            rotate: 45,
                            textStyle: {
                                color: '#fff',
                            },
                        },
                        axisTick: { //刻度点数轴
                            show: true,
                            alignWithLabel: false,
                        },
                        data: xData,
                    }],
                    yAxis: [{//y轴的相关设置
                        type: 'value',//y轴数据类型为连续的数据
                        min: 0,//y轴上的刻度最小值
                        // max: 140,//y轴上的刻度最大值
                        // splitNumber: 7,//y轴上的刻度段数
                        splitLine: {//y轴上的y轴线条相关设置
                            show: true,
                            lineStyle: {
                                color: '#233e64'
                            }
                        },
                        axisLine: {//y轴的相关设置
                            show: true,
                            lineStyle: {
                                color: '#233e64' //y轴颜色
                            },
                        },
                        axisLabel: {//y轴的标签相关设置
                            textStyle: {
                                color: '#6a9cd5',
                            },
                        },
                        axisTick: { show: true, },  //刻度点数轴
                    }],
                    series: [{
                        name: '月预警趋势',
                        type: 'line',//统计图类型为折线图
                        smooth: true, //是否平滑曲线显示
                        symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
                        lineStyle: {//线条的相关设置
                            normal: {
                                color: "#3deaff"   // 线条颜色
                            }
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(61,234,255, 0.9)' },
                                    { offset: 0.8, color: 'rgba(61,234,255, 0)' }
                                ], false),

                                shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: seriesData
                    }]
                };
                mytu6.setOption(option6)
            })
        }
        // 升序
        function compare1(property) {
            return function (a, b) {
                var value1 = a[property]
                var value2 = b[property]
                return value1 - value2
            }
        }
    
    </script>
</html>